<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <!-- ICON -->
    <link href="/frame/images/favicon.ico" type="image/ico" rel="shortcut icon">
    <!-- CSS -->
    <link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/lib/layuiadmin/css/admin.css" media="all" />

</head>
<body layadmin-themealias="default">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md2">
                    <!--<form class="layui-form" style="float: left;">-->
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-warm" lay-submit lay-filter="addBtn" title="新增">
                            <i class="layui-icon">&#xe61f;</i> 新增
                        </button>
                    </div>
                    <!--                    <div class="layui-inline">-->
                    <!--                        <button class="layui-btn layui-btn-warm" lay-submit lay-filter="enableJobBtn" title="开启">-->
                    <!--                            <i class="layui-icon">&#xe61f;</i>开启-->
                    <!--                        </button>-->
                    <!--                    </div>-->
                    <!--</form>-->
                </div>
                <div class="layui-col-md10">
                    <form class="layui-form" id="queryForm" style="float: right;">
                        <!--                        <div class="layui-inline">-->
                        <!--                            <input type="text" name="jianjie" title="简介" placeholder="请输入简介" autocomplete="off" class="layui-input">-->
                        <!--                        </div>-->
                        <!--                        <div class="layui-inline">-->
                        <!--							<input type="text" name="mmmc" title="名称" placeholder="请输入名称" autocomplete="off" class="layui-input">-->
                        <!--						</div>-->

                        <button class="layui-btn" lay-submit lay-filter="query">
                            <i class="layui-icon">&#xe615;</i> 查询
                        </button>
                        <!--<button class="layui-btn" lay-submit lay-filter="crontimebtn2">-->
                        <!--<i class="layui-icon">&#xe615;</i> cron-->
                        <!--</button>-->
                    </form>
                </div>
            </div>
            <hr class="layui-bg-gray">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <!-- 表格 -->
                    <table id="table" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 操作 -->
<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 状态操作 -->
<!--<script type="text/html" id="taskstatus">-->
<!--	<input type="checkbox" id="{{d.id}}" name="taskstatus" value="{{d.taskstatus}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="switchSysTaskStatus" {{ d.taskstatus == 1 ? 'checked' : '' }}>-->
<!--</script>-->

<!--<script type="text/html" id="triggerstatus">-->
<!--	<input type="checkbox" id="{{d.id}}" name="triggerstatus" value="{{d.triggerstatus}}" lay-skin="switch" lay-text="正常|停止" lay-filter="switchTriggerStatus" {{ d.triggerstatus == 1 ? 'checked' : '' }}>-->
<!--</script>-->
<!-- 状态操作 -->

<!--<script type="text/html" id="triggertype">-->
<!--	<input type="checkbox" id="{{d.id}}" name="triggertype" value="{{d.triggertype}}" lay-skin="switch" lay-text="Cron|Simple" lay-filter="switchTriggerType" {{ d.triggertype == 1 ? 'checked' : '' }}>-->
<!--</script>-->

<!-- 新增 -->
<script type="text/html" id="addForm">
    <form class="layui-form layui-form-pane">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-form-item"><label class="layui-form-label">用户编号</label><div class="layui-input-block"><input type="text" name="yhbm" autocomplete="off" placeholder="请输入姓名" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input type="text" name="xm" autocomplete="off" placeholder="请输入" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">手机号</label><div class="layui-input-block"><input type="text" name="mobile" autocomplete="off" placeholder="请输入手机号" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">身份证号</label><div class="layui-input-block"><input type="text" name="sfzh" autocomplete="off" placeholder="请输入身份证号" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">银行卡号</label><div class="layui-input-block"><input type="text" name="yhkh" autocomplete="off" placeholder="请输入银行卡号" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">银行卡类型（1：借记卡2：贷记卡）</label><div class="layui-input-block"><input type="text" name="yhklx" autocomplete="off" placeholder="请输入银行卡类型（1：借记卡2：贷记卡）" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">银行名称</label><div class="layui-input-block"><input type="text" name="yhmc" autocomplete="off" placeholder="请输入银行名称" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">银行代码</label><div class="layui-input-block"><input type="text" name="yhdm" autocomplete="off" placeholder="请输入银行代码" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">绑定状态</label><div class="layui-input-block"><input type="text" name="bdzt" autocomplete="off" placeholder="请输入绑定状态" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">子账号</label><div class="layui-input-block"><input type="text" name="subno" autocomplete="off" placeholder="请输入子账号" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">交易网会员代码 平台端的用户ID，需要保证唯一性，可数字字母混合，如HY_120，</label><div class="layui-input-block"><input type="text" name="membercode" autocomplete="off" placeholder="请输入交易网会员代码 平台端的用户ID，需要保证唯一性，可数字字母混合，如HY_120，" class="layui-input"></div></div>
                        <div class="layui-form-item"><label class="layui-form-label">备注，绑定失败的原因等信息</label><div class="layui-input-block"><input type="text" name="bz" autocomplete="off" placeholder="请输入备注，绑定失败的原因等信息" class="layui-input"></div></div>
                    </div>
                    <div class="hidden-attribute">
                        <button class="layui-btn submit" lay-submit="" lay-filter="add">新增</button>
                        <button class="layui-btn reset" type="reset">重置</button>
                    </div>
                </div>
                <!--<input class="hidden-attribute" name="avatar">-->
            </div>
        </div>
    </form>
</script>

<!-- 详情 -->
<script type="text/html" id="view">
    <table class="layui-table" style="width: 680px; margin: 10px 10px 0px 10px;">
            <tr><td class="table-td-title">用户编号</td><td width="465">{{d.yhbm}}</td></tr>
            <tr><td class="table-td-title">姓名</td><td width="465">{{d.xm}}</td></tr>
            <tr><td class="table-td-title">手机号</td><td width="465">{{d.mobile}}</td></tr>
            <tr><td class="table-td-title">身份证号</td><td width="465">{{d.sfzh}}</td></tr>
            <tr><td class="table-td-title">银行卡号</td><td width="465">{{d.yhkh}}</td></tr>
            <tr><td class="table-td-title">银行卡类型（1：借记卡2：贷记卡）</td><td width="465">{{d.yhklx}}</td></tr>
            <tr><td class="table-td-title">银行名称</td><td width="465">{{d.yhmc}}</td></tr>
            <tr><td class="table-td-title">银行代码</td><td width="465">{{d.yhdm}}</td></tr>
            <tr><td class="table-td-title">绑定状态</td><td width="465">{{d.bdzt}}</td></tr>
            <tr><td class="table-td-title">子账号</td><td width="465">{{d.subno}}</td></tr>
            <tr><td class="table-td-title">交易网会员代码 平台端的用户ID，需要保证唯一性，可数字字母混合，如HY_120，</td><td width="465">{{d.membercode}}</td></tr>
            <tr><td class="table-td-title">备注，绑定失败的原因等信息</td><td width="465">{{d.bz}}</td></tr>
            <tr><td class="table-td-title">录入时间</td><td width="465">{{d.insertime}}</td></tr>
            <tr><td class="table-td-title">修改时间</td><td width="465">{{d.updatetime}}</td></tr>
    </table>

    <br>
</script>

<!-- 编辑 -->
<script type="text/html" id="editForm">
    <form class="layui-form layui-form-pane">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md12">
                            <div class="layui-form-item"><label class="layui-form-label">用户编号</label><div class="layui-input-block"><input type="text" name="yhbm" autocomplete="off" placeholder="" class="layui-input" value="{{d.yhbm}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input type="text" name="xm" autocomplete="off" placeholder="" class="layui-input" value="{{d.xm}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">手机号</label><div class="layui-input-block"><input type="text" name="mobile" autocomplete="off" placeholder="" class="layui-input" value="{{d.mobile}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">身份证号</label><div class="layui-input-block"><input type="text" name="sfzh" autocomplete="off" placeholder="" class="layui-input" value="{{d.sfzh}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">银行卡号</label><div class="layui-input-block"><input type="text" name="yhkh" autocomplete="off" placeholder="" class="layui-input" value="{{d.yhkh}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">银行卡类型（1：借记卡2：贷记卡）</label><div class="layui-input-block"><input type="text" name="yhklx" autocomplete="off" placeholder="" class="layui-input" value="{{d.yhklx}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">银行名称</label><div class="layui-input-block"><input type="text" name="yhmc" autocomplete="off" placeholder="" class="layui-input" value="{{d.yhmc}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">银行代码</label><div class="layui-input-block"><input type="text" name="yhdm" autocomplete="off" placeholder="" class="layui-input" value="{{d.yhdm}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">绑定状态</label><div class="layui-input-block"><input type="text" name="bdzt" autocomplete="off" placeholder="" class="layui-input" value="{{d.bdzt}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">子账号</label><div class="layui-input-block"><input type="text" name="subno" autocomplete="off" placeholder="" class="layui-input" value="{{d.subno}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">交易网会员代码 平台端的用户ID，需要保证唯一性，可数字字母混合，如HY_120，</label><div class="layui-input-block"><input type="text" name="membercode" autocomplete="off" placeholder="" class="layui-input" value="{{d.membercode}}"></div></div>
                            <div class="layui-form-item"><label class="layui-form-label">备注，绑定失败的原因等信息</label><div class="layui-input-block"><input type="text" name="bz" autocomplete="off" placeholder="" class="layui-input" value="{{d.bz}}"></div></div>
                    </div>
                    <div class="hidden-attribute">
                        <button class="layui-btn submit" lay-submit="" lay-filter="update">新增</button>
                        <button class="layui-btn reset" type="reset">重置</button>
                    </div>
                </div>
                <input class="hidden-attribute" name="id" value="{{d.id}}" title="ID">
            </div>
        </div>
    </form>
</script>

<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>

<script type="text/javascript" th:inline="none">
    layui.config({
        base: '/lib/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'upload'], function() {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            element = layui.element,
            laytpl = layui.laytpl,
            $ = layui.jquery,
            // $addBtn = $('#addBtn'),
            $queryForm = $('#queryForm');

        var layerIndex = 1;
        var layerInitWidth;
        var layerInitHeight;

        // 绘制表格
        table.render({
// 		id: 'table',
            elem: '#table',
            url: '/pig/t-yhk/table',
            page: true, // 开始分页
            // cellMinWidth: 80, // 定义全局最小宽度
            request: {
                pageName: 'offset'
            },
            response: {
                statusCode: 10000
                // countName: 'total', //数据总数的字段名称，默认：count
                // dataName: 'list' //数据列表的字段名称，默认：data
            },
            cols: [[
                {type: 'numbers', title: '序号',fixed: 'left'},
                {field:'id', title: '', width:200},
                {field:'yhbm', title: '姓名', width:200},
                {field:'xm', title: '', width:200},
                {field:'mobile', title: '手机号', width:200},
                {field:'sfzh', title: '身份证号', width:200},
                {field:'yhkh', title: '银行卡号', width:200},
                {field:'yhklx', title: '银行卡类型（1：借记卡2：贷记卡）', width:200},
                {field:'yhmc', title: '银行名称', width:200},
                {field:'yhdm', title: '银行代码', width:200},
                {field:'bdzt', title: '绑定状态', width:200},
                {field:'subno', title: '子账号', width:200},
                {field:'membercode', title: '交易网会员代码 平台端的用户ID，需要保证唯一性，可数字字母混合，如HY_120，', width:200},
                {field:'bz', title: '备注，绑定失败的原因等信息', width:200},
                {field:'insertime', title: '创建时间', align:'center',width:170},
                {field:'updatetime', title: '修改时间', align:'center',width:170},
                {field:'userid', title: '录入账号', align:'center', width:110},
                {fixed:'right', align:'center', width: 180, toolbar: '#operationBar'}
            ]]
        });
        //监听工具条
        table.on('tool(table)', function(obj) {
            var data = obj.data,
                $this = $(this),
                getView = view.innerHTML,
                getEdit = editForm.innerHTML;
            if(obj.event === 'detail') {
                $.get('/pig/t-yhk/' + data.id, function(res) {
                    if(res.code == 403) {
                        layer.msg(res.message, {icon: 4});
                    } else {
                        laytpl(getView).render(res, function(html) {
                            popupWin($this.text(), html, false);
                        })
                    }
                })
            } else if(obj.event === 'del') {
                layer.confirm('真的删除行么', {icon: 3}, function(index) {
                    operate('DELETE', {'id': data.id}, false, obj);
                    layer.close(index);
                });
            } else if(obj.event === 'edit') {
                $.get('/pig/t-yhk/' + data.id, function(res) {
                    if(res.status == 403) {
                        layer.msg(res.message, {icon: 4});
                    } else {
                        laytpl(getEdit).render(res, function(html) {
                            popupWin($this.text(), html, true);
                        });
                        rendering();
                    }
                })
            }
        });

        // 监听状态改变
        // form.on('switch(switchSysTaskStatus)', function(obj) {
        // 	operate('PUT', {'id': this.id, 'taskstatus': obj.elem.checked}, true);
        // });
        // form.on('switch(switchTriggerStatus)', function(obj) {
        // 	operate('PUT', {'id': this.id, 'triggerstatus': obj.elem.checked}, true);
        // });
        // form.on('switch(switchTriggerType)', function(obj) {
        // 	operate('PUT', {'id': this.id, 'triggertype': obj.elem.checked}, true);
        // });

        // 搜索条件提示
        $queryForm.find('input').on('mouseover', function() {
            if(typeof($(this).attr('title')) == 'undefined') return;
            layer.tips($(this).attr('title'), this, {tips: 1});
        });

        // 新增
        form.on('submit(addBtn)', function(data) {
            var $this = $(this);
            laytpl(addForm.innerHTML).render(data, function(html) {
                popupWin($this.attr('title'), html, true);
            });
            rendering();
            return false;
        });
        // // 开启任务
        // form.on('submit(enableJobBtn)', function(data) {
        //
        //     var url = '/pig/t-yhk/enableJob';
        //     $.ajax({
        //         url: url,
        //         type: 'POST',
        //         async: true,
        //         data: '',
        //         success: function(res) {
        //             if(res.code == 10000) {
        //                 layer.msg(res.message, {icon: 1});
        //             }  else if(res.code == 403) {
        //                 layer.msg(res.message, {icon: 4});
        //             } else {
        //                 layer.msg(res.message, {icon: 5});
        //             }
        //         }
        //     })
        //
        // });

        // 新增
        form.on('submit(add)', function(data) {
            var $form = $(this).parents('form');
            operate('POST', data.field, true);
            return false;
        });

        // 更新
        form.on('submit(update)', function(data) {
            var $form = $(this).parents('form');
            var roles = [];
            $form.find('input[name=roles]:checked').each(function() {
                roles.push($(this).val());
            });
            data.field.roles = roles;
            operate('PUT', data.field, true);
            return false;
        });

        // 查询
        form.on('submit(query)', function(data) {
            table.reload('table', {
                where: data.field
            });
            return false;
        });

        // 操作
        // ajaxType 请求类型
        // data 参数
        // refresh 是否刷新
        // 删除操作时传入的当前行对象
        function operate(ajaxType, data, refresh, delRow) {
            var url = '/pig/t-yhk/';
            if(ajaxType == 'DELETE') {
                url = '/pig/t-yhk/' + data.id;
            }
            $.ajax({
                url: url,
                type: ajaxType,
                async: true,
                data: data,
                success: function(res) {
                    if(res.code == 10000) {
                        layer.close(layerIndex);
                        if(refresh) {
                            table.reload('table');
                        } else if(ajaxType == 'DELETE') {
                            delRow.del();
                        }
                        if(data.resetPwd) {
                            layer.alert(res.message, {icon: 6});
                        } else {
                            layer.msg(res.message, {icon: 1});
                        }
                    }  else if(res.code == 403) {
                        layer.msg(res.message, {icon: 4});
                    } else {
                        layer.msg(res.message, {icon: 5});
                    }
                }
            })
        }

        //渲染弹框
        function popupWin(title, content, showBtn) {
            layerIndex = layer.open({
                id: 'meatball',
                type: 1, //Page层类型
                area: '700px', //['700px', '480'],
                maxWidth: 1000,
                maxHeight: 800,
                title: title,
                skin: 'layui-layer-rim', //加上边框
                shade: 0.1, //遮罩透明度
                // maxmin: true, //允许全屏最小化
                anim: 0, //0-6的动画形式，-1不开启
                scrollbar: false, //禁用滚动
                content: content,
                btn: showBtn ? ['<i class="layui-icon layui-icon-ok"></i> 提交', '<i class="layui-icon layui-icon-refresh-1"></i> 重置'] : '',
                yes: function(index, layero) {
                    layero.find('form .submit').trigger('click');
                    return false;
                },
                btn2: function(index, layero) {
                    layero.find('form .reset').trigger('click');
                    return false;
                },
                success: function (layero, index) {
                    //获取当前弹出窗口的索引及初始大小
                    layerIndex = index;
                    layerInitWidth = $("#layui-layer" + layerIndex).width();
                    layerInitHeight = $("#layui-layer" + layerIndex).height();
                    resizeLayer(layerIndex, layerInitWidth, layerInitHeight);
                    form.render();
                }
            });
            // layer.full(layerIndex);
        }

        // 动态渲染控件
        function rendering() {
            var $form = $('form');
            // 渲染select
            form.render('select');
            // 重新渲染多选框
            form.render('checkbox');
            // // 初始化日期
            // laydate.render({
            // 	elem: '.birthday'
            // });

        }


        function resizeLayer(layerIndex, layerInitWidth, layerInitHeight) {
            var windowWidth = $(document).width();
            var windowHeight = $(document).height();
            var minWidth = layerInitWidth > windowWidth ? windowWidth : layerInitWidth;
            var minHeight = layerInitHeight > windowHeight ? windowHeight : layerInitHeight;
            // console.log("win:", windowWidth, windowHeight);
            // console.log("lay:", layerInitWidth, layerInitHeight);
            // console.log("min:", minWidth, minHeight);
            layer.style(layerIndex, {
                top: 15,
                width: minWidth,
                height: minHeight
            });
        }
        $(window).resize(function() {
            resizeLayer(layerIndex,layerInitWidth,layerInitHeight);
        });

    });
</script>
</body>
</html>